<template>
	<view class="pros">
		<view class="prosearch">
			<view class="prosearch-box">
				<uni-easyinput suffixIcon="search" :inputBorder="false" v-model="searchVal" placeholder="输入搜索关键词"
					@confirm="handleSearch" @iconClick="handleSearch"></uni-easyinput>
			</view>
		</view>
		<view class="prosprompt">
			<view class="prosprompt-box">
				<text>最低下单10000元起发</text>
			</view>
		</view>
		<view class="pronav">
			<view class="pronav-t">
				<view class="pronav-m" :class="{act:index===category_f}" v-for="(item,index) in categorys" :key="index"
					@click="handleFir(index)">{{item.title}}
				</view>
			</view>
			<view class="pronav-c" v-if="categorys[category_f].spcc.length>0">
				<view class="pronav-n" :class="{act:index===category_c}" v-for="(item,index) in categorys[category_f].spcc"
					:key="index" @click="handleCla(index)">{{item.title}}</view>
			</view>
			<view class="pronav-b">
				<view class="pronav-s" :class="{act:sortarr[0]==0}" @click="handleSortReset">默认</view>
				<view class="pronav-s pronav-s-sort" :class="{act:sortarr[1]!=-1,asc:sortarr[1]==0,desc:sortarr[1]==1,}"
					@click="handleSale">
					销量</view>
				<view class="pronav-s pronav-s-sort" :class="{act:sortarr[2]!=-1,asc:sortarr[2]==0,desc:sortarr[2]==1,}"
					@click="handlePrice">
					价格
				</view>
			</view>
		</view>
		<view class="prolist">
			<navigator url="/pages/proinfo/proinfo" hover-class="none" class="proitem" v-for="(item,index) in prolist"
				:key="index">
				<view class="jximgbox">
					<view class="jxstips">中药配方颗粒</view>
					<image class="jximg" :src="item.img" mode="aspectFit"></image>
				</view>
				<view class="jxinfo">
					<view class="jxtitle">{{item.title}}</view>
					<view class="jxspcc">包装规格：{{item.spcc}}</view>
					<view class="jxprice" v-if="isLogin">￥{{item.price}}</view>
					<view class="jxlogin" v-else>￥认证后可见</view>
					<view class="jxtip">厂家直销</view>
					<view class="jxer">本产品非质量问题不退/换</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	//是否登录
	const isLogin = ref(false)
	//搜索
	const searchVal = ref('')
	const handleSearch = () => {
		console.log(searchVal.value)
		getPro()
	}
	//menu
	const category_f = ref(0);
	const category_c = ref(-1);
	const categorys = ref([{
			id: 1,
			title: "中药配方颗粒",
			spcc: [{
				id: 2,
				title: "小袋装"
			}, {
				id: 3,
				title: "大袋装"
			}]
		},
		{
			id: 6,
			title: "中药饮片",
			spcc: []
		},
		{
			id: 10,
			title: "食品",
			spcc: [{
				id: 12,
				title: "食品111"
			}, {
				id: 15,
				title: "食品222"
			}]
		}
	])
	const handleFir = (ind) => {
		category_f.value = ind;
		category_c.value = -1;
		sortarr.value = [0, -1, -1];
		getPro()
	}
	const handleCla = (ind) => {
		category_c.value = ind;
		sortarr.value = [0, -1, -1];
		getPro()
	}
	//筛选
	const sortarr = ref([0, -1, -1]);
	const handleSortReset = () => {
		sortarr.value = [0, -1, -1];
		getPro()
	}
	const handleSale = () => {
		if (sortarr.value[1] == -1) {
			sortarr.value = [-1, 0, -1];
		} else if (sortarr.value[1] == 0) {
			sortarr.value = [-1, 1, -1];
		} else {
			sortarr.value = [0, -1, -1];
		}
		getPro()
	}
	const handlePrice = () => {
		if (sortarr.value[2] == -1) {
			sortarr.value = [-1, -1, 0];
		} else if (sortarr.value[2] == 0) {
			sortarr.value = [-1, -1, 1];
		} else {
			sortarr.value = [0, -1, -1];
		}
		getPro()
	}
	//获取产品
	const prolist = ref([])
	const getPro = () => {
		uni.showLoading({
			title: '加载中'
		});
		setTimeout(() => {
			prolist.value = [{
				id: 1,
				title: "矮地茶配方颗粒",
				spcc: "每袋装0.83g",
				img: 'http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg',
				price: 19.00
			}, {
				id: 2,
				title: "矮地茶配方颗粒",
				spcc: "每袋装0.83g",
				img: 'http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg',
				price: 11.00
			}, {
				id: 3,
				title: "矮地茶配方颗粒",
				spcc: "每袋装0.83g",
				img: 'http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg',
				price: 16.00
			}, {
				id: 4,
				title: "矮地茶配方颗粒",
				spcc: "每袋装0.83g",
				img: 'http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg',
				price: 18.00
			}, {
				id: 5,
				title: "矮地茶配方颗粒",
				spcc: "每袋装0.83g",
				img: 'http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg',
				price: 18.00
			}]
			uni.hideLoading()
		}, 300)
	}
</script>

<style lang="scss">
	.prosearch {
		position: sticky;
		top: 0;
		background: $main-color;
		z-index: 13;
		padding: 20rpx;

		&-box {
			border-radius: 5px;
			overflow: hidden;
		}
	}

	.prosprompt {
		display: flex;
		justify-content: center;
		background: $main-color;
		overflow: hidden;

		&-box {
			padding: 0 10rpx;
			background: $cf;
			line-height: 60rpx;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				left: -35rpx;
				top: 0;
				bottom: -2px;
				width: 80rpx;
				background: $cf;
				transform: skewX(-30deg);
				border-radius: 5px 0 0 0;
			}

			&::after {
				content: "";
				position: absolute;
				right: -35rpx;
				top: 0;
				bottom: -2px;
				width: 80rpx;
				background: $cf;
				transform: skewX(30deg);
				border-radius: 0 5px 0 0;
			}

			text {
				font-size: 24rpx;
				color: $red;
				position: relative;
				z-index: 1;
			}
		}
	}

	.pronav {
		position: sticky;
		top: 100rpx;
		z-index: 12;
		background: $cf;
		padding: 0 20rpx;
		padding-bottom: 20rpx;

		&-t {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
		}

		&-m {
			font-size: 30rpx;
			color: $c0;

			&.act {
				color: $main-color;
			}
		}

		&-c {
			background: #f4f4f4;
			border-radius: 5px;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			grid-gap: 10rpx 30rpx;
		}

		&-n {
			font-size: 28rpx;
			color: $c6;
			display: inline-block;

			&.act {
				color: $main-color;
			}
		}

		&-b {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 30rpx;
			border-top: 1px solid #e7e7e7;
			border-bottom: 1px solid #e7e7e7;
		}

		&-s {
			font-size: 30rpx;
			color: $c0;

			&.act {
				color: $main-color;
			}

			&-sort {
				padding-right: 25rpx;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 15rpx;
					height: 10rpx;
					background: $c9;
					top: 8rpx;
					right: 0;
					clip-path: polygon(50% 0, 100% 100%, 0 100%);
				}

				&::after {
					content: "";
					position: absolute;
					width: 15rpx;
					height: 10rpx;
					background: $c9;
					bottom: 8rpx;
					right: 0;
					clip-path: polygon(0 0, 100% 0, 50% 100%);
				}

				&.asc {
					&::before {
						background: $main-color;
					}
				}

				&.desc {
					&::after {
						background: $main-color;
					}
				}
			}
		}
	}

	.prolist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		padding: 20rpx;

		.proitem {
			.jximgbox {
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
			}

			.jxinfo {
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				background: #f3f3f3;
				padding: 20rpx;
				margin-top: -1px;
			}
		}
	}
</style>